<!-- ---
title: Mock API
layout: default
keywords: [mock,api,http]
description: 快速配置公网可访问的 mock http 接口
--- -->

<li class="header-extend-item uk-parent" data-uk-dropdown="{mode:'click'}">
    <a class="uk-navbar-content">访问控制</a>
    <div id="access-manage" class="uk-dropdown uk-dropdown-navbar uk-dropdown-scrollable" 
        style="width:700px;height:400px;max-height:400px;">
        {% raw %}
        <div class="uk-form uk-form-row" style="float:right;">
            <input style="width:260px;" type="text" placeholder="请输入要新增的 accessKey 的别名" v-model="newAlias"/>
            <button class="uk-button uk-button-small uk-button-primary" v-on:click="addOne()">新增</button>
        </div>
        <table class="uk-table uk-table-hover">
            <thead>
                <tr>
                    <th>别名</th> <th>accessKey</th> <th>状态</th> <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in accessItemList" :key="item.accessKey">
                    <td class="uk-text-left"><p>{{ item.alias }}</p></td> 
                    <td class="uk-text-left">{{ item.accessKey }}</td> 
                    <td class="uk-text-left">
                        <button class="uk-button uk-button-small" style="pointer-events: none;" 
                            :class="{'uk-button-success':item.status == 1}">{{ item.statusName }}</button>
                    </td>
                    <td class="uk-text-left">
                        <button class="uk-button uk-button-small" v-show="item.status == 1"
                            v-on:click="disableOne(item)">停用</button>
                        <button class="uk-button uk-button-small" v-show="item.status == 0"
                            v-on:click="enableOne(item)">启用</button>
                        <button class="uk-button uk-button-small uk-button-danger" 
                            v-on:click="deleteOne(item)">删除</button>
                    </td> 
                </tr>
            </tbody>
        </table>
        {% endraw %}
    </div>
    <script>
        vm_access_manage = new Vue({
            el:'#access-manage',
            data: {
                newAlias: '',
                accessItemList: []
            },
            mounted: function () {
                this.listAll()
            },
            methods: {
                listAll: function () {
                    WithFParams.postForm('/accessManage/listAll', 
                        {
                            from: 'mock'
                        },
                        (result) => {
                            vm_access_manage.accessItemList = result.data
                        }
                    )
                },
                addOne: function() {
                    if (this.newAlias === '') {
                        vm_header_notify.notify('请输入要新增的 accessKey 的别名', 'warning')
                        return
                    }
                    if (this.newAlias.length > 15) {
                        vm_header_notify.notify('别名 要取得足够短才好', 'warning')
                        return
                    }
                    WithFParams.postForm('/accessManage/addOne', 
                        {
                            from: 'mock',
                            alias: this.newAlias
                        },
                        (result) => {
                            if (result.success) {
                                this.listAll()
                                this.newAlias = ''
                                vm_header_notify.notify('新增成功')
                            } else if (result.code == 'E100000') {
                                vm_header_notify.notify('新增失败, 别名已被使用', 'danger')
                            } else {
                                vm_header_notify.notify('新增失败(' + result.message + ')', 'danger')
                            }
                        }
                    )
                },
                disableOne: function (accessItem) {
                    WithFParams.postForm('/accessManage/disableOne', 
                        {
                            from: 'mock',
                            accessKey: accessItem.accessKey
                        },
                        (result) => {
                            if (result.success) {
                                this.listAll()
                                vm_header_notify.notify('操作成功')
                            } else {
                                vm_header_notify.notify('操作失败(' + result.message + ')', 'danger')
                            }
                        }
                    )
                },
                enableOne: function (accessItem) {
                    WithFParams.postForm('/accessManage/enableOne', 
                        {
                            from: 'mock',
                            accessKey: accessItem.accessKey
                        },
                        (result) => {
                            if (result.success) {
                                this.listAll()
                                vm_header_notify.notify('操作成功')
                            } else {
                                vm_header_notify.notify('操作失败(' + result.message + ')', 'danger')
                            }
                        }
                    )
                },
                deleteOne: function(accessItem) {
                    WithFParams.postForm('/accessManage/deleteOne', 
                        {
                            from: 'mock',
                            accessKey: accessItem.accessKey
                        },
                        (result) => {
                            var index = vm_access_manage.accessItemList.indexOf(accessItem)
                            if (index != -1) {
                                vm_access_manage.accessItemList.splice(index, 1)
                                vm_header_notify.notify('删除成功')
                            }
                        }
                    )
                }
            }
        })
    </script>
</li>
<script>
$('.header-extend-item').appendTo('#header-extend')</script>